<template>
  <div 
    :id="id" 
  />
</template>

<script>
  import * as echarts from 'echarts'
  import axios from 'axios'
  export default {
    props:['id','chartdata','title'],
    data() {
      return {
        chart: null,
      }
    },
    mounted() {
      setTimeout(() => {
        this.draw()
      })
      window.addEventListener('resize', this.resizeChart)
    },
    activated() {
      if (this.chart) {
        this.resizeChart()
      }
    },
    methods: {
      resizeChart() {
        this.chart.resize()
      },
      async draw() {
        function getVirtulData(year) {
          year = year || '2017';
          var date = + echarts.number.parseDate(year + '-01-01');
          var end = + echarts.number.parseDate(+year + 1 + '-01-01');
          var dayTime = 3600 * 24 * 1000;
          var data = [];
          for (var time = date; time < end; time += dayTime) {
            data.push([
              echarts.format.formatTime('yyyy-MM-dd', time),
              Math.floor(Math.random() * 100)
            ]);
          }
          return data;
        }
        const { title,id } = this
        this.chart = echarts.init(document.getElementById(id))
        const option = {
          title: {
            // top: 30,
            left:0,
            text:title
          },
          tooltip:{
            trigger:'item',
            formatter:({data:[date,value]})=>{
              return `日期：${date}<br >热度：${value}`
            }
          },
          visualMap: {
            min: 0,
            max: 100,
            type: 'piecewise',
            orient: 'horizontal',
            left: 'center',
            top: 0
          },
          calendar: {
            top: 70,
            left: 30,
            right: 30,
            cellSize: ['auto', 16],
            range: '2016',
            itemStyle: {
              borderWidth: 0.5
            },
            yearLabel: { show: false }
          },
          series: {
            type: 'heatmap',
            coordinateSystem: 'calendar',
            data: getVirtulData('2016')
          }
        };
        this.chart.setOption(option)
      },
    },
    destroyed() {
      window.removeEventListener('resize', this.resizeChart)
    }
  }
</script>
<style lang="scss" scoped>
.main {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
}
</style>